<template>
	<view>
		<!-- 自定义导航栏 -->
		<news-nav-bar 
		:tabBars="tabBars" 
		:tabIndex="tabIndex" 
		@change-tab="changeTab"></news-nav-bar>	
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{height:swiperheight+'px'}" 
			:current="tabIndex"
			@change="tabChange">
			    <!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
						<!-- 列表 -->
						<block v-for="(item,index) in guanzhu.list" :key="index">
							<common-list :item="item" :index="index"></common-list>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadtext="guanzhu.loadtext"></load-more>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" placeholder-class="iconfont icon-sousuo topic-search" placeholder="搜索内容"/>
						</view>						
						<!-- 轮播图 -->
							<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">							
								<block v-for="(item,index) in topic.swiper" :key="index">
									<swiper-item>
										<image :src="item.src" lazy-load mode="widthFix"></image>
									</swiper-item>		
								</block>					
							</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav="topic.nav"></topic-nav>
						<!-- 最近更新 -->
						<view class="topic-new">
							<view>最近更新</view>
							<block v-for="(item,index) in topic.list" :key="index">
								<topic-list :item="item" :index="index"></topic-list>
							</block>							
						</view>
						
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import newsNavBar from "../../components/news/news-nav-bar.vue"
	import commonList from "../../components/common/common-list.vue"
	import topicNav from "../../components/news/topic-nav.vue"
	import topicList from "../../components/news/topic-list.vue"
	import loadMore from "../../components/common/load-more.vue";
	export default {
		components:{
			commonList,
			newsNavBar,
			topicNav,
			topicList,
			loadMore
		},
		data() {
			return {
				swiperheight:500,
				tabIndex:0,
				tabBars:[
					{name:'关注',id:'guanzhu'},
					{name:'话题',id:'topic'}
				],
				guanzhu:{
					loadtext:"上拉加载更多",
					list:[
						{
							//文字列表
							userpic:'../../static/img/ez.png',
							username:'伊泽瑞尔',
							sex:0, //0 男 1 女
							age:18,
							isguanzhu:false,
							title:'是时候表演真正的技术了！',
							titlepic:'',
							video:false,
							share:false,
							path:'湖北 宜昌',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
						{
							//图文列表
							userpic:'../../static/img/daomei-img.jpg',
							username:'艾瑞利亚',
							sex:1, //0 男 1 女
							age:25,
							isguanzhu:false,
							title:'艾欧尼亚！',
							titlepic:'../../static/img/daomei.jpg',
							video:false,
							share:false,
							path:'广东 深圳',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
						//视频
						{
							//图文列表
							userpic:'../../static/img/fox-img.jpg',
							username:'阿狸',
							sex:1, //0 男 1 女
							age:15,
							isguanzhu:false,
							title:'摸索着，跌倒着，彷徨着，浮躁着......',
							titlepic:'../../static/img/ali.jpg',
							video:{
								looknum:'20w',
								long:'2:47'
							},
							share:false,
							path:'四川 成都',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
						//分享
						{
							userpic:'../../static/img/kasha-img.jpg',
							username:'卡莎',
							sex:1, //0 男 1 女
							age:20,
							isguanzhu:false,
							title:'我不用想象，我去过那里',
							titlepic:'',
							video:false,
							share:{
								title:'',
								titlepic:'../../static/img/kasha.jpg'
							},
							path:'上海 浦东',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
					],
				},
				topic:{
					swiper:[
						{src:"../../static/img/watch.jpg"},
						{src:"../../static/img/11.jpg"}
					],
					nav:[
						{name:"最新"},
						{name:"游戏"},
						{name:"打卡"},
						{name:"情感"},
						{name:"故事"},
						{name:"喜爱"}
					],
					list:[
						{
							titlepic:"../../static/img/iphone12.jpg",
							title:"iphone12 Pro",
							desc:"iphone12 Pro上手实测",
							totalnum:666,
							todaynum:33
						},
						{
							titlepic:"../../static/img/yuanshen.jpg",
							title:"原神角色测评(钟离篇)",
							desc:"建议人手一个，立帖为证，不抽后悔",
							totalnum:222,
							todaynum:11
						},
						{
							titlepic:"../../static/img/wangzhe.jpg",
							title:"王者荣耀",
							desc:"我是话题描述",
							totalnum:333,
							todaynum:20
						},
						{
							titlepic:"../../static/img/douyin.jpg",
							title:"抖音",
							desc:"抖音就是一个平平无奇的,但是我每天都会刷到手机没电的APP",
							totalnum:180,
							todaynum:99
						}
					]
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=> {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height
				}
			})
		},
		methods: {
			//点击切换
			changeTab(index){
				this.tabIndex = index
			},
			// 滑动事件
			tabChange(e){
				this.tabIndex = e.detail.current
			},
			// 上拉加载
			loadmore(){
				if(this.guanzhu.loadtext!='上拉加载更多'){return;}
				//修改状态
				this.guanzhu.loadtext="加载中...";
				//获取数据
				setTimeout(()=>{
					//获取完成
					let obj = {
							userpic:"../../static/img/pika.jpg",
							username:"木木的奇奇",
							sex:0,
							isguanzhu:false,
							title:"万人敬仰背后的失落感",
							titlepic:"../../static/img/1.webp",
							video:false,
							share:false,
							path:"深圳 龙岗",
							sharenum:20,
							commentnum:30,
							goodnum:20
					};
					this.guanzhu.list.push(obj)
					this.guanzhu.loadtext='上拉加载更多'
				},1000)
			}
		}
	}
</script>

<style>
.topic-swiper {
	padding:0 20upx 20upx 20upx;
}
.topic-swiper image {
	width: 100%;
	height: 100%!important;
	border-radius: 10upx;
}
.search-input {
	padding: 20upx;
}
.search-input>input {
	background: #F4F4F4;
	border-radius: 10upx;
}
.topic-search {
	display: flex;
	justify-content: center;
	font-size: 27upx
}
.common-list {
	padding: 20upx;
}
.common-list-l {
	flex-shrink: 0;
}
.common-list-l image {
	width: 90upx;
	height: 90upx;
	border-radius: 100%;
}
.common-list-r {
	flex: 1;
	margin-left: 15upx;
	border-bottom: 1upx solid #EEEEEE;
	padding-bottom: 10upx;
}
.common-list-r>view:nth-child(3)>image{
	width: 100%;
	border-radius: 10upx;
}
.common-list-r>view:nth-child(1)>view:first-child {
	color: #999999;
	font-size: 32upx
}
.tag-sex {
	background: #007AFF;
	color: #FFFFFF;
	font-size: 23upx;
	padding: 5upx 10upx;
	margin-left: 10upx;
	border-radius: 20upx;
	line-height: 22upx;
}
.common-list-r>view:nth-child(1)>view:last-child {
	background: #EEEEEE;
	padding: 0 10upx;
	font-size: 26upx
}
.common-list-r>view:nth-child(2) {
	font-size: 32upx;
	padding: 12upx 0;
}
.common-list-r>view:nth-child(3) {
	position: relative;
}
.common-list-play,.common-list-playinfo{
	position: absolute;
	color: #FFFFFF;
}
.common-list-play {
	font-size: 130upx;
}
.common-list-playinfo {
	right: 10upx;
	bottom: 10upx;
	background:rgba(51,51,51,0.73);
	border-radius: 20upx;
	padding: 0 20upx;
	font-size: 26upx
}
.common-list-r>view:nth-child(4)>view {
	color: #AAAAAA;
}
.common-list-r>view:nth-child(4)>view:nth-child(2)>view{
	margin-left: 10upx;
	padding-left: 5upx;
}
.common-list-share {
	background: #EEEEEE;
	width: 100%;
	padding: 10upx;
	border-radius: 10upx;
}
.common-list-share>image {
	width: 200upx;
	height: 150upx;
	margin-right: 10upx;
}
</style>
